<template>
  <div class="home">
    <div id="map_canvas"></div>
  </div>
</template>
<script>
import { styleJson,popout } from '../../components/mapjson/styleJson'
import { ShzzInfoList } from '@/api/index'
export default {
  name: 'Home',
  components: {},
  data(){
    return{
      map:'',
      infoWindow:'',
      styleJson,
      markerClusterer:'',
      data:[
        {
          lng:'116.404',
          lat:'39.915'
        },
        {
          lng:'116.304',
          lat:'39.815'
        },
        {
          lng:'116.204',
          lat:'39.855'
        },
        {
          lng:'116.454',
          lat:'39.865'
        },
        {
          lng:'116.544',
          lat:'39.885'
        },
      ]
    }
  },
  created() {
    console.log(this,'this-----------------',window.BMapGL,window.BMap);
    this.$nextTick(() => {
      this.init()
    })
  },
  mounted(){
    this.getList()
  },
  methods:{
    async getList(){
      let params = {
        model:'ShzzGetZsgyManager',
        method:'getShzzInfoList',
        xzqh:'330225',
        // startdate:this.config.startdate,
        // enddate:this.config.enddate
      }
      try{
        await ShzzInfoList(params).then(res => {
          console.log(res,'中间地图-社会组织地图列表');
          res.data.data.forEach(item => {
            item.url = require('../../assets/images/map-icon.png')
          })
          this.pointList = [ ...res.data.data ]
          // this.point.lat = this.pointList[0].lat
          // this.point.lng = this.pointList[0].lng
          // this.infoWindowShow = true
          // this.myIcon = this.BMap.Icon(require('../../assets/images/map-icon.png'),this.BMap.Size(74,111));
        })
      }catch(err){
        console.log(err);
      }
    },
    init(){
      // 创建地图实例
      var map = new window.BMapGL.Map('map_canvas',{
        enableRotate: false, // 禁止地图旋转和倾斜可以通过配置项进行设置
        enableTilt: false
      });
      // 初始化地图，设置中心点坐标和地图级别
      var center = new window.BMapGL.Point(116.404, 39.915);
      map.centerAndZoom(center, 15);
      // 开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true);
      // 设置地图样式
      map.setMapStyleV2({
        styleJson:styleJson
      });
      // 设置地图旋转角度
      // map.setHeading(64.5);
      // 设置地图的倾斜角度
      // map.setTilt(73);


      // 1.添加一个聚合点存放数组
      var markersArr = []
      const myIcon = new window.BMapGL.Icon(require('../../assets/images/map-icon.png'), new window.BMapGL.Size(74,111));
      this.data.map(item => {
        // 坐标点经纬度
        let point = new window.BMapGL.Point(item.lng, item.lat);
        let marker = new window.BMapGL.Marker(point, {
          icon: myIcon,
          offset: { width: 0, height: 0 },
        });
        map.addOverlay(marker);
        markersArr.push(marker) // 2.存放聚合点

        //   // 添加信息窗口
        var opts = {
	        width : 482, // 信息窗口宽度
	        height: 874, // 信息窗口高度
	        title : '故宫博物院' , // 信息窗口标题
	        message:'这里是故宫'
        }
        // var infoWindow = new window.BMapGL.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts); // 创建信息窗口对象
        var infoWindow = new window.BMapGL.InfoWindow(popout, opts); // 创建信息窗口对象
        this.infoWindow = infoWindow
        marker.addEventListener('click', function(){
          map.openInfoWindow(infoWindow, point); //开启信息窗口
        });
      });

      // // 3.重点!!! 聚合代码主要就是以下这句
      // this.markerClusterer=new window.BMapLib.MarkerClusterer(map, { markers:markersArr });


      // 创建点坐标  // 将标注添加到地图中
      // var myIcon = new window.BMapGL.Icon(require('../assets/images/map-icon.png'), new window.BMapGL.Size(77, 111), {
      //   anchor: new window.BMapGL.Size(10, 25),
      //   imageOffset: new window.BMapGL.Size(0, 0 - 25) // 设置图片偏移
      // });
      // // 创建标注对象并添加到地图
      // var point = new window.BMapGL.Point(116.404, 39.915);
      // var marker = new window.BMapGL.Marker(point, { icon: myIcon });
      // map.addOverlay(marker);




      //   // 监听地图的单击事件
      //   map.addEventListener('click', function() {
      //     console.log('click!，监听地图的单击事件')
      //   });

      //   // 创建定位控件
      //   var locationControl = new window.BMapGL.LocationControl({
      //     anchor: window.BMAP_ANCHOR_TOP_RIGHT,
      //     // 控件基于停靠位置的偏移量（可选）
      //     offset: new window.BMapGL.Size(20, 20)
      //   });
      //   map.addControl(locationControl);
      //   // 添加定位事件
      //   locationControl.addEventListener('locationError',function(e){
      //     alert(e.message);
      //   });


      // 2. 创建MapVGL图层管理器
      var view = new window.mapvgl.View({
        map: map
      });

      // 3. 创建可视化图层，并添加到图层管理器中
      var layer = new window.mapvgl.IconLayer({
        width: 74,
        height: 111,
        icon: require('../../assets/images/map-icon.png'),
        onClick: e => { // 点击事件
          console.log('click', e);
        },
      });
      view.addLayer(layer);

      // 4. 准备好规范化坐标数据
      var dataaa = [
        {
          geometry: {
            type: 'Point',
            coordinates: [ 116.403648, 39.915055 ]
          }
        },
        {
          geometry: {
            type: 'Point',
            coordinates: [ 116.405748, 39.815055 ]
          }
        },
        {
          geometry: {
            type: 'Point',
            coordinates: [ 116.403718, 39.715055 ]
          }
        },
        {
          geometry: {
            type: 'Point',
            coordinates: [ 116.403448, 39.615055 ]
          }
        },
      ];

      // 5. 关联图层与数据，享受震撼的可视化效果
      layer.setData(dataaa);









    },
    //一键清除
    clearAll(markers) {
      //清除覆盖物
      this.map.clearOverlays();
      //清除聚合点
      this.markerClusterer.clearMarkers(markers);
    }





  }
}
</script>

<style lang="scss" scoped>
@function companyW($num) {
  @return ($num * 100)/1920;
}
@function companyH($num) {
  @return ($num * 100)/1080;
}
.home{
  width: 100vw;height: 100vh;
  #map_canvas {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

  /* 样式穿透 修改百度地图原有样式 */
/* 去掉百度地图logo--begin */
  ::v-deep .BMap_cpyCtrl {
      display: none;
  }
  ::v-deep .anchorBL {
      display: none;
  }
  ::v-deep .BMap_bubble_content{
    // overflow: none !important;
    width: 469px !important;
    height: 514px !important;
  }
  ::v-deep .BMap_shadow {
      display: none;
  }
}
</style>
